<template>
  <div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
        <div class="title">{{title}}</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否启用：" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  active-value="2"
                  inactive-value="1"
                  active-text="启用"
                  inactive-text="关闭"> 
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="活动名称：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请填写活动名称" maxlength="10"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="活动时间：" prop="date"> 
                <el-date-picker
                  v-model="ruleForm.date"
                  @change="getTime"
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="图片:" label-width="100px" prop="img">
                <ImageUpload :limit="1" @successImg="successImg" :value="ruleForm.img" @input="handleRemove"></ImageUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="ruleForm.status == 1">保存草稿</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="ruleForm.status == 2">保存开始</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    
  </div>
</template>
<script>
import {
  addInvite,
  inviteDetail,
  editInvite,
} from '@/api/inviteNew'
export default {
  name: "",
  components: {
    
  },
  
  data() {
    return {
      title: '新增邀新活动',
      checked: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      disabled: false,
      pathType: 'add',
      ruleForm: {
        status: 1,
        endTime: '',
        startTime: '',
        id: '',
        name: '',
        img: '',
        date: [],
      },
      rules: {
        status:[
          { required: true, message: '请选择', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        img: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ],
      }
      
    };
  },
  watch: {
   
  },
  created() {
    this.pathType = this.$route.query.pathType
    this.ruleForm.id = this.$route.query.id
    if(this.pathType == 'edit'){
      this.getDetail()
    }else if(this.pathType == 'detail'){
      this.getDetail()
      this.disabled = true
    }
  },
  mounted() {
  
  },
  methods: {
    getTime(e){
      console.log("e",e)
      var timeArr = e
      var startTime = timeArr[0].split(' ')  //time[0] + ' ' + time[1]+':00:00' 
      this.ruleForm.startTime =  startTime[0] + ' ' + startTime[1]+':00:00'
      var endTime = timeArr[1].split(' ')
      this.ruleForm.endTime = endTime[0] + ' ' + endTime[1]+':00:00'
      console.log("e",this.ruleForm.startTime)
      console.log("e",this.ruleForm.endTime)
    },
    getDetail() {
      inviteDetail(this.ruleForm.id).then(response => {
        
        if(response.result.status == 2 || response.result.status == 3){
          this.ruleForm.status = '2'
        }else{
          this.ruleForm.status = '1'
        }
        console.log('status',this.ruleForm.status)
        this.ruleForm.id = response.result.id
        this.ruleForm.name = response.result.name
        this.ruleForm.img = response.result.img
        console.log('this.ruleForm.date',this.ruleForm.date)
        this.ruleForm.date.push(response.result.startTime)
        this.ruleForm.date.push(response.result.endTime)
        this.ruleForm.startTime = response.result.startTime
        this.ruleForm.endTime = response.result.endTime
      });
    },
    /* 添加价格 */
    successImg(img){
      console.log('img',img)
      this.ruleForm.img = img
    },
    // 删除图片
    handleRemove(){
      this.ruleForm.img = ''
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          if(this.pathType == 'add'){
            var data = {
              ...this.ruleForm
            }
            addInvite(data).then(res => {
              this.handleSuccess("创建成功")
            }).finally(() => {
              this.loading = false
            })
          }else if(this.pathType == 'edit'){
            
            var data = {
              ...this.ruleForm
            }
            editInvite(data).then(res => {
              this.handleSuccess("修改成功")
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        // onClose: () => {
        //   this.handleClose('ruleForm')
        // }
      })
      this.$router.push({
        path: '/inviteNew/inviteNew-list'
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px 0;
}
.title{
  font-size: 24px;
  padding: 14px 30px 30px 30px;
  color: #222;
  font-weight: 500;
}
</style>
